<template>
  <div>
    <i @click="showLeftBarFun" v-show="!showLeftBar"></i>
    <div  v-show="showLeftBar" class="leftBar">
    <div class="choosetoplayleft">
        <div class="choosetheplay">选择玩法</div>
        <ul class="playList">
          <li v-for="(item,index) in wanfOdds" :key="index"  :class="{'choosedactive':chekedMethod==index}">
              <Dropdown placement="right-start" v-if="item.set" @on-click="getodds">
                    <a href="javascript:void(0)" @click="navClick(index)">
                       {{item.name}}
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem v-for="(itemChild,index1) in item.set" :name="item.name+ '--' +index1+'|'+index" :key="index1">{{itemChild}}</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                <span class="otherf1" @click="changePlay(index)" v-else>
                    {{item.name}}
                </span>
          </li>
            <!-- 选择玩法鼠标移入时显示的排名玩法列表 -->
            <div class="sort" style="display:none">
                <li>第一名</li>
                <li>第二名</li>
            </div>
        </ul>
      </div>
      <div class="choosetoplaycenter">
          <div class="centermain" id="centermain">
              <div class="top">
                  <ul>
                      <li :class="{activebottomline:!isZhuiHao}" @click="setZhuiHao(false)">投注</li>
                      <li :class="{activebottomline:isZhuiHao}" @click="setZhuiHao(true)">追号</li>
                  </ul>
              </div>
              <!-- 猜双面 -->
              <div class="center">
                  <ul>
                      <li>
                          <span></span>&nbsp;&nbsp;&nbsp;{{methodsArr[chekedMethod]}}</li>
                      <li @click="declareModel = true">
                          <em></em>&nbsp;赔率说明</li>
                  </ul>
              </div>
              <div class="bigorsmall">
                      <!-- 猜数字 -->
                      <template v-if="chekedMethod == 0">
                        <div v-for="(item,index) in playMethod" :key="index">
                          <div class="h3Tit" :id="'pmTitle'+index"><h3>{{wanfOdds[chekedMethod].set[index]}}</h3></div>
                          <div class="cpmPanel">
                            <div v-for="(item1,index1) in item.data" :key="index1" class="chooseSytle" @click="checkOdds(index1,item1.title,index)" v-bind:class='{checkedStyle:checkedOddsStyle(index1,index)}'>
                              <div :class="`cpmImg${index1+1}`" class="cpmImg"></div>
                              <p>{{item1.value}}</p>
                            </div>
                          </div>
                        </div>
                      </template>

                      <!-- 猜双面 -->
                      <template v-if="chekedMethod == 1">
                        <div v-for="(item,index) in playMethod" :key="index">
                          <div class="h3Tit" :id="'pmTitle'+index"><h3>{{wanfOdds[chekedMethod].set[index]}}</h3></div>
                          <ul class="cpmPanel">
                            <li v-for="(item1,index1) in item.data" :key="index1" class="chooseSytle" @click="checkOdds(index1,item1.title,index)" v-bind:class='{checkedStyle:checkedOddsStyle(index1,index)}'>
                              <p>{{item1.title.split('_')[1]}}</p>
                              <p>{{item1.value}}</p>
                            </li>
                          </ul>
                        </div>
                      </template>
                      
                      <!-- 猜总和 -->
                      <template v-if="chekedMethod == 2">
                        <ul>
                          <li v-for="(item,index) in playMethod" class="chooseSytle" @click="checkOdds(index,item.title)" v-bind:class='{checkedStyle:checkedOddsStyle(index)}'>
                            <p>{{item.title.split('_')[1]}}</p>
                            <p>{{item.value}}</p>
                          </li>
                        </ul>
                      </template>

                      <!-- 猜对子 -->
                      <template v-if="chekedMethod == 3">
                        <div class="cpmPanel cdzPanel">
                          <div v-for="(item,index) in playMethod" :key="index" class="chooseSytle" @click="checkOdds(index,item.title)" v-bind:class='{checkedStyle:checkedOddsStyle(index)}'>
                            <div class="flexBox">
                              <div :class="`cpmImg${index+1}`" class="cpmImg" style="margin-right: 5px;"></div>
                              <div :class="`cpmImg${index+1}`" class="cpmImg"></div>
                            </div>
                              <p>{{item.value}}</p>
                          </div>
                        </div>
                      </template>

                      <!-- 猜围骰 -->
                      <template v-if="chekedMethod == 4">
                        <div class="cpmPanel cwsPanel">
                          <div v-for="(item,index) in playMethod" :key="index"  v-if="index!=6" class="chooseSytle" @click="checkOdds(index,item.title)" v-bind:class='{checkedStyle:checkedOddsStyle(index)}'>
                            <div>
                              <div class="sjBox">
                                <div :class="`cpmImg${index+1}`" class="cpmImg"></div>
                                <div class="flexBox">
                                  <div :class="`cpmImg${index+1}`" class="cpmImg"></div>
                                  <div :class="`cpmImg${index+1}`" class="cpmImg"></div>
                                </div>
                              </div>
                            </div>
                            <p>{{item.value}}</p>                            
                          </div>
                          <div v-else class="chooseSytle fullWidth" @click="checkOdds(index,item.title)" v-bind:class='{checkedStyle:checkedOddsStyle(index)}'>
                            <div>
                              <div class="sjBox" v-for="(item2,index2) in playMethod.length">
                                <div :class="`cpmImg${index2+1}`" class="cpmImg"></div>
                                <div class="flexBox">
                                  <div :class="`cpmImg${index2+1}`" class="cpmImg"></div>
                                  <div :class="`cpmImg${index2+1}`" class="cpmImg"></div>
                                </div>
                              </div>
                            </div>
                            <p>{{item.value}}</p>                          
                          </div>
                        </div>
                      </template>

                      <!-- 猜单骰 -->
                      <template v-if="chekedMethod == 5">
                        <div class="cpmPanel">
                          <div v-for="(item,index) in playMethod" :key="index" class="chooseSytle" @click="checkOdds(index,item.title)" v-bind:class='{checkedStyle:checkedOddsStyle(index)}'>
                              <div :class="`cpmImg${index+1}`" class="cpmImg"></div>
                              <p>{{item.value}}</p>
                          </div>
                        </div>
                      </template>

                      <!-- 猜双骰 -->
                      <template v-if="chekedMethod == 6">
                        <div class="cpmPanel cdzPanel">
                          <div v-for="(item,index) in playMethod" :key="index" class="chooseSytle" @click="checkOdds(index,item.title)" v-bind:class='{checkedStyle:checkedOddsStyle(index)}'>
                              <div class="flexBox">
                              <div :class="`cpmImg${item.num1}`" class="cpmImg" style="margin-right: 5px;"></div>
                              <div :class="`cpmImg${item.num2}`" class="cpmImg"></div>
                            </div>
                              <p>{{item.value}}</p>
                          </div>
                        </div>
                      </template>
                      <template v-if="chekedMethod == 7">
                        <div v-for="(item,index) in playMethod" :key="index">
                          <div class="clTitle"><span>{{item.way}}</span><span>{{item.num}}期</span></div>
                          <ul>
                            <li v-for="(item1,index1) in item.data" :key="index1" class="chooseSytle" @click="checkOdds(index1,item1.way,index)" v-bind:class='{checkedStyle:checkedOddsStyle(index1,index)}'>
                              <P>{{item1.way.indexOf('_') >= '0' ? item1.way.split('_')[1]: item1.way}}</P>
                              <p>{{item1.odds}}</p>
                            </li>
                          </ul>
                        </div>
                      </template>
              </div>
          </div>
          <!-- 投注操作区 -->
          <div class="choosetoplayfooter" id="choosetoplayfooter" v-show="!isZhuiHao">
              <div class="havebet">
                  <p>已选&nbsp;
                      <span>{{oddsWay.length}}</span>&nbsp;注，共&nbsp;
                      <span>{{totalMoney}}</span>&nbsp;元宝</p>
              </div>
              <div class="inputbet">
                  <InputNumber @on-change="checkedMoneyIdx=null" :max="999999999" :min='1' :formatter="(value)=> `${Math.round(value)}`" :parser="(value)=> `${Math.round(value)}`" type="text" placeholder="请输入下注金额" v-model="checkedMoney" style="width:200px !important"></InputNumber>
                  <span @click="minBetAdd()">最小投注</span>
              </div>
              <div class="bet">
                  <ul>
                      <li v-for="(item,index) in moneyList" @click="checkMoney(index,item)" :key="index" v-bind:class='{ckMoneyStyle:index==checkedMoneyIdx}'>{{item>=1000 ? Number(item)/1000 + 'K' : item}}</li>
                      <li @click="checkMoney(100,'梭哈')" v-bind:class='{ckMoneyStyle:checkedMoneyIdx==100}'>梭哈</li>
                  </ul>
              </div>
              <div class="reset">
                  <Button type="primary" @click="openOddsDlg()" :disabled="oddsWay.length<1" v-bind:class='{disabledBtn:oddsWay.length<1}' class="qrBetBtn">确认下注</Button>
                  <Button type="primary" @click="resetOdds()">重置</Button>
              </div>
          </div>
          <!-- 追号操作区 -->
          <div class="zhPanel" id="zhPanel" v-show="isZhuiHao">
            <div class="zfInput">
              追<InputNumber  type="text" :max="100" :min="1" placeholder="" v-model="manyQi" style=""></InputNumber>期&nbsp;&nbsp;
              翻<InputNumber type="text" :min="1" placeholder="" v-model="manyBei" style=""></InputNumber>倍
            </div>
            <InputNumber type="text" placeholder="请输入下注金额" class="moneyInput" v-model="checkedMoney"></InputNumber>                
            <div class="btnBox">
              <Button type="primary" @click="setZhDlg(true)">生成追号</Button>
            </div>
          </div>
          <!-- 点击收缩左边的两栏 -->
          <em class="shrink" @click="showLeftBarFun" v-show="showLeftBar"></em>
      </div>
      </div>
      <Modal
        v-model="sendOddsDlg"
        class-name=""
        :closable="false"
        :scrollable="true"
        :mask-closable="false">
        <p slot="header">第{{timeMessages.issue}}期，下注清单</p>
        <Table height="300" :columns="columns1" :data="oddsTableData" style="font-size:14px;" v-if="oddsTableData.length>0"></Table>     
        <div class="tableNoData" v-else>
          <img src="@/assets/images/tableNoData.png" alt="">
        </div>
        <div slot="footer">
          <p class="tableTip">共<span>{{oddsWay.length}}</span>注，金额<span>{{totalMoney}}</span></p>
          <Button @click="closeOddsDlg">取消</Button>            
          <Button type="primary" @click="sendOdds" :disabled="oddsTableData.length<1||stopBet" :loading="sendFlag">确认投注</Button>
        </div>
      </Modal>
      <Modal
        v-model="showZhDlg"
        class-name=""
        title="追号清单"
        width="600"
        :scrollable="true"
        :mask-closable="false">
        <div class="zhPanel2">
          追<InputNumber type="text" :max="100" :min="1" placeholder="" v-model="manyQi" style=""></InputNumber>期&nbsp;&nbsp;
          翻<InputNumber type="text" :min="1" placeholder="" v-model="manyBei" style=""></InputNumber>倍
          <InputNumber type="text" placeholder="请输入下注金额" class="moneyInput2" v-model="checkedMoney"></InputNumber>          
          <Button type="primary" @click="setZhDlg(true)">生成追号</Button>
        </div>
        <Table height="300" :columns="columns2" :data="zhTableData" style="font-size:14px;"></Table>
        <p class="zjjtP"><Checkbox v-model="zhType">中奖即停</Checkbox></p>
        <div slot="footer">
          <p class="tableTip">共<span>{{manyQiNow}}</span>注，金额<span>{{totalZhMoney}}</span></p>
          <Button @click="setZhDlg(false)">取消</Button>            
          <Button type="primary" @click="confromZh()" :disabled="zhTableData.length<1||stopBet">确认投注</Button>
        </div>
      </Modal>
      <Modal
          v-model="declareModel"
          title="赔率说明"
          @on-ok="declareModel = false"
          cancel-text
          ok-text="关闭"
          :scrollable="true"          
          width='600'
          >
          <p style="max-height: 500px;overflow-y: auto;">
            <pre v-html="RoomDateList"></pre>
          </p>
          
      </Modal>
  </div>
</template>

<script>
import { websocketsend } from "@/common/js/websocket";
import _ from "lodash";
import removeImg from "@/assets/images/remove.png";
import { mapGetters, mapActions } from "vuex";
import { timeFormat } from "@/assets/js/dom"

import router from "@/router";
export default {
  props: [
    "oddsData",
    "timeMessages",
    "cRoomData",
    "BetmoneyList",
    "bindAbsClass",
    "lDragonData"
  ],
  data() {
    return {
      sendFlag: false,
      playMethod: [],
      issue: "", //当前期号
      checkedOdd: [], //赔率
      moneyList: [5, 10, 50, 100, 500], //下注金额
      checkedMoney: 1, //金额
      checkOddData: false, //提交投注校验
      checkedMoneyIdx: 0,
      checkedOddIndex: 0,
      oddsWay: [], //投注数组
      moneyArr: [], //金额数组
      totalMoney: 0,
      isZhuiHao: false, //是否是追号
      showZhDlg: false, //追号面板
      zhTableData: [], //追号tabledata
      zhBetData: [], //追号data
      zhType: true, //中奖即停
      manyQi: 1, //追几期
      manyQiNow: 1,
      manyBei: 1, //翻几倍
      totalZhMoney: 0, //追号总金额
      sendOddsDlg: false,
      chekedMethod: 0, //选中的玩法
      columns1: [
        //投注表格内容自定义
        {
          title: "玩法",
          key: "name",
          align: "center"
        },
        {
          title: "内容",
          key: "type",
          align: "center"
        },
        {
          title: "金额",
          key: "money",
          align: "center",
          render: (h, params) => {
            return h("InputNumber", {
              props: {
                value: this.moneyArr[params.index],
                formatter: value => `${Math.round(value)}`,
                parser: value => `${Math.round(value)}`,
                max: 10000,
                min: 1
              },
              style: { width: "80px", textAlign: "center" },
              on: {
                input: e => {
                  this.totalMoney = 0;
                  this.$set(this.moneyArr, params.index, e);
                  for (var i = 0; i < this.moneyArr.length; i++) {
                    this.totalMoney += this.moneyArr[i];
                  }
                }
              }
            });
          }
        },
        {
          title: "撤单",
          key: "remove",
          align: "center",
          render: (h, params) => {
            return h("img", {
              attrs: {
                src: removeImg
              },
              style: { cursor: "pointer", "vertical-align": "middle" },
              on: {
                click: () => {
                  this.totalMoney =
                    this.totalMoney - this.moneyArr[params.index];
                  this.oddsTableData.splice(params.index, 1);
                  this.moneyArr.splice(params.index, 1);
                  this.oddsWay.splice(params.index, 1);
                  this.checkedOdd.splice(params.index, 1);
                }
              }
            });
          }
        }
      ],
      columns2: [
        {
          title: "期号",
          key: "issue",
          align: "center"
        },
        {
          title: "投注金额",
          key: "money",
          align: "center"
        },
        {
          title: "翻倍",
          key: "multiple",
          align: "center"
        }
      ],
      oddsTableData: [],
      methodsArr: [
        "猜数字",
        "猜双面",
        "猜总和",
        "猜对子",
        "猜围骰",
        "猜单骰",
        "猜双骰",
      ],
      wanfOdds: [
        //玩法菜单数据组织
        {
          name: "猜数字",
          set: ["第一骰", "第二骰", "第三骰"],
          panel: []
        },
        {
          name: "猜双面",
          set: ["第一骰", "第二骰", "第三骰"],          
          panel: []
        },
        {
          name: "猜总和",
          panel: []
        },
        {
          name: "猜对子",
          panel: []
        },
        {
          name: "猜围骰",
          panel: []
        },
        {
          name: "猜单骰",
          panel: []
        },
        {
          name: "猜双骰",
          panel: []
        },
      ],
      declareModel: false, //
      RoomDateList: null, //房间信息
      roomId: null, //房间id
      lottery_type: null, // 彩种类型
      betLower: 1,
      showLeftBar: true,
      token: localStorage.getItem('token')
    };
  },
  created() {
    this.roomId = this.$route.query.id;
    this.lottery_type = this.$route.query.lottery_type;
    //   if(this.lottery_type == 4){
    //     this.wanfOdds[1].name = '猜号码'
    //     this.methodsArr[1] = '猜号码'
    //   }
  },
  mounted() {},
  computed: {
    ...mapGetters(["accountData","serTime","userInfo", "stopBet"])
  },

  methods: {
    showLeftBarFun: function() {
      this.showLeftBar = !this.showLeftBar;
      setTimeout(() => {
        var chatcontent = document.getElementById("chatcontent");
        var sendmsg = document.getElementById("sendmsg");
        sendmsg.style.width = chatcontent.offsetWidth + "px";
      });
    },
    setZhuiHao(flag) {
      //打开或关闭追号面板
      this.resetOdds();
      this.isZhuiHao = flag;
    },
    checkedOddsStyle: function(index, index1) {
      //选中style
      var newStr = index1+'_'+index;
      if (this.isZhuiHao == true) {
        if (this.checkedOddIndex == newStr) {
          return true;
        }
      } else {
        if (this.checkedOdd.indexOf(newStr) != -1) {
          return true;
        }
      }
    },
    setZhDlg: function(flag) {
      //设置追号数据
      var arr2 = this.checkedOddIndex.split("_");
      if (flag) {
        if (this.checkedOddIndex == -1) {
          this.$Message.info("请选择玩法");
          return;
        }
        var issue = this.issue;
        var zhTableData = [];
        var zhBetData = [];
        var totalZhMoney = 0;
        this.manyQi = Math.round(this.manyQi);
        if (this.manyQi > 100) {
          this.$Message.info("最多追加100期！");
          this.manyQi = 100;
          return;
        }
        this.manyBei = Math.round(this.manyBei);
        this.checkedMoney = Math.round(this.checkedMoney);
        this.manyQiNow = this.manyQi;
        for (var i = 1; i <= this.manyQi; i++) {
          totalZhMoney += this.checkedMoney * Math.pow(this.manyBei, i - 1);
          zhTableData.push({
            issue: issue,
            money: this.checkedMoney * Math.pow(this.manyBei, i - 1) + "元宝",
            multiple: Math.pow(this.manyBei, i - 1) + "倍"
          });
          if (_.isArray(this.playMethod[0].data)) {
            //有下拉框
            var way = this.playMethod[arr2[0]].data[arr2[1]].title?this.playMethod[arr2[0]].data[arr2[1]].title:this.playMethod[arr2[0]].data[arr2[1]].way
            zhBetData.push({
              qihao: issue,
              money: this.checkedMoney * Math.pow(this.manyBei, i - 1),
              single_money: this.checkedMoney,
              way: way,
              multiple: Math.pow(this.manyBei, i - 1)
            });
          } else {
            zhBetData.push({
              qihao: issue,
              money: this.checkedMoney * Math.pow(this.manyBei, i - 1),
              single_money: this.checkedMoney,
              way: this.playMethod[arr2[1]].title,
              multiple: Math.pow(this.manyBei, i - 1)
            });
          }
          issue++;
        }
        this.totalZhMoney = totalZhMoney;
        this.zhTableData = zhTableData;
        this.zhBetData = zhBetData;
      }
      this.showZhDlg = flag;
    },
    confromZh: function() {
      //追号确认
      this.$Modal.confirm({
        content:
          "<p>本期追号投注：" +
          this.manyQiNow +
          "期，共" +
          this.totalZhMoney +
          "元宝</p>",
        scrollable: true,
        loading: true,
        onOk: () => {
          const agentData = {
            token: this.token,
            commandid: "3019",
            nickname: JSON.parse(localStorage.getItem("userData")).nickname,
            data: this.zhBetData,
            win_stop: this.zhType ? 1 : 0,
            avatar: JSON.parse(localStorage.getItem("userData")).avatar
          };
          websocketsend(agentData);
          this.showZhDlg = false;
        }
      });
    },
    checkOdds(index, title, index1) {
      //选中操作
      var newStr = index1+'_'+index;
      this.checkedOddIndex = newStr; 
      if (this.checkedOdd.indexOf(newStr) == -1) {
        this.checkedOdd.push(newStr);
        this.oddsWay.push(title);
        this.totalMoney = this.oddsWay.length * this.checkedMoney;
      } else {
        for (var i = 0; i < this.checkedOdd.length; i++) {
          if (this.checkedOdd[i] == newStr) {
            this.checkedOdd.splice(i, 1);
            this.oddsWay.splice(i, 1);
            this.totalMoney = this.oddsWay.length * this.checkedMoney;
          }
        }
      }
    },

    checkMoney(index, item) {
      if (item == "梭哈") {
        let accountData = this.accountData.money_usable;
        this.checkedMoney = Math.round(Number(accountData));
        this.checkedMoneyIdx = index;
        this.totalMoney = this.checkedMoney * this.checkedOdd.length;
      } else {
        this.checkedMoney = item;
        this.checkedMoneyIdx = index;
        this.totalMoney = this.checkedMoney * this.checkedOdd.length;
      }
    },
    resetOdds() {
      this.zhBetData = [];
      this.zhTableData = [];
      this.manyBei = 1;
      this.manyQi = 1;
      this.checkedOddIndex = -1;
      this.checkedOdd = [];
      this.oddsWay = [];
      this.checkedMoney = this.moneyList[0];
      this.checkedMoneyIdx = 0;
      this.totalMoney = 0;
    },
    closeOddsDlg: function() {
      this.totalMoney = this.checkedMoney * this.oddsWay.length;
      this.sendOddsDlg = false;
    },
    openOddsDlg: function() {
      let newMoneyArr = [];
      let newOddsArr = [];
      for (var i = 0; i < this.oddsWay.length; i++) {
        newOddsArr.push({
          name: this.methodsArr[this.chekedMethod],
          type: this.oddsWay[i],
          money: this.checkedMoney,
          remove: "删除"
        });
        newMoneyArr.push(this.checkedMoney);
      }
      this.moneyArr = newMoneyArr;
      this.oddsTableData = newOddsArr;
      this.sendOddsDlg = true;
    },
    sendOdds: function() {
      this.sendFlag=true
      setTimeout(()=>{
        this.sendFlag=false
      },1000)
      const agentData = {
        token: this.token,
        commandid: "3006",
        nickname: JSON.parse(localStorage.getItem("userData")).nickname,
        way: this.oddsWay,
        money: this.moneyArr,
        avatar: JSON.parse(localStorage.getItem("userData")).avatar
      };
      var way = this.oddsWay
      var money = this.moneyArr
      var uniNo = new Date().getTime()+Math.floor(Math.random()*900)+100
      var params = {
        user_id: this.userInfo.id,
        lottery_type: this.$route.query.lottery_type,
        room_id: this.$route.query.id,
        nickname: this.userInfo.nickname,
        money: JSON.stringify(money),
        issue: this.issue,
        way: JSON.stringify(way),
        serTime: this.serTime,
        uniNo: uniNo,
        token: this.token,
      }
      let lotRstData={
        isHttp: true,
        isLoading: true,
        avatar: this.userInfo.avatar,
        commandid: 30007,
        issue: this.issue,
        money: money,
        nickname: this.userInfo.nickname,
        time: timeFormat(new Date().getTime()),
        total_money: this.totalMoney,
        total_zushu: this.checkedOdd.length,
        uid: this.userInfo.id,
        uniNo: uniNo,
        sort: this.userInfo.honor.sort,
        serTime: this.serTime,
        order_no: '',
        way: way,
        loadingFailed: false,
        failedText: '',
      }
      this.$store.commit('setLotRstData', lotRstData)
      this.$http.post(this.urlRequest + "?m=api&c=workerman&a=http_betting", params).then(result=>{
        result=result.data
        if(result.commandid!=3007){
          var failedObj = JSON.parse(JSON.stringify(lotRstData))
          failedObj.loadingFailed=true
          failedObj.failedText=result.content
          this.$store.commit('setNewRstData', failedObj)
          return
        }
        var accountData = this.accountData
        accountData.money_usable=result.current_money
        this.$store.commit('setAccountData', accountData)
        this.$store.commit('setNewRstData', result)
      },
      err=>{
        lotRstData.loadingFailed=true
        lotRstData.failedText='投注超时，请重新下注'
        this.$store.commit('setNewRstData', lotRstData)
      })
      // websocketsend(agentData);
      this.sendOddsDlg = false;
    },
    getodds: function(names) {
      let nameArr = [];
      nameArr = names.split("--");
      let f1 = nameArr[0];
      let f2 = nameArr[1].split("|")[0];
      let f3 = nameArr[1].split("|")[1];
      this.checkedOdd = [];
      this.oddsWay = [];
      if(this.methodsArr[this.chekedMethod]!=f1){
        this.chekedMethod = f3;
        this.playMethod = this.wanfOdds[this.chekedMethod].panel
      }
      setTimeout(()=>{
        let anchorElement = document.getElementById('pmTitle'+f2)
        var centermain = document.getElementById('centermain')
        centermain.scrollTop= anchorElement.offsetTop
      },20)
      return
      for (var i = 0; i < this.methodsArr.length; i++) {
        if (this.methodsArr[i].indexOf(f1) > -1) {
          this.methodsArr[i] = f1 + "-" + f2;
          this.chekedMethod = i;
          this.playMethod = this.wanfOdds[this.chekedMethod].panel[f3];
          console.log(this.playMethod,'playMethod');
        }
      }
    },
    navClick: function(index){
      if(index!=this.chekedMethod){
        this.changePlay(index)
      }
    },
    selectNum(num) {
      let result = "gusessNum-" + num;
      return result;
    },
    minBetAdd() {
      // 最小投注的事件
      this.checkedMoney = Number(this.betLower);
      this.totalMoney = this.checkedMoney * this.checkedOdd.length;
      this.checkedMoneyIdx = null;
    },
    changePlay(id) {
      this.chekedMethod = id;
      this.resetOdds();
      //换玩法
      this.playMethod = this.wanfOdds[id].panel;
      if(id==6){
        for(var i=0;i<this.playMethod.length;i++){
          var num1 = this.playMethod[i].title.split("_")[1].split("-")[0]
          var num2 = this.playMethod[i].title.split("_")[1].split("-")[1]
          this.playMethod[i].num1=num1
          this.playMethod[i].num2=num2
        }
      }
    }
  },
  components: {},
  watch: {
    oddsData: function(oldVal, newVal) {
      let f1Room = oldVal;
      let that = this;
      if (!_.isEmpty(f1Room)) {
        for (var i = 0; i < that.wanfOdds.length; i++) {
          if (
            !_.isEmpty(f1Room.panel_1) &&
            that.wanfOdds[i].name == "猜数字"
          ) {
            var list = that.wanfOdds[i].set
            var value = []
            for(var k=0;k<list.length;k++){
              value.push(f1Room['panel_1'][k])
            }
            that.wanfOdds[i].panel = value;
          } else if (
            !_.isEmpty(f1Room.panel_2) &&
            that.wanfOdds[i].name == "猜双面"
          ) {
            var list = that.wanfOdds[i].set
            var value = []
            for(var k=0;k<list.length;k++){
              value.push(f1Room['panel_2'][k])
            }
            that.wanfOdds[i].panel = value;
          } else if (
            !_.isEmpty(f1Room.panel_3) &&
            that.wanfOdds[i].name == "猜总和"
          ) {
            that.wanfOdds[i].panel = f1Room.panel_3;
          } else if (
            !_.isEmpty(f1Room.panel_4) &&
            that.wanfOdds[i].name == "猜对子"
          ) {
            that.wanfOdds[i].panel = f1Room.panel_4;
          } else if (
            !_.isEmpty(f1Room.panel_5) &&
            that.wanfOdds[i].name == "猜围骰"
          ) {
            that.wanfOdds[i].panel = f1Room.panel_5;
          } else if (
            !_.isEmpty(f1Room.panel_6) &&
            that.wanfOdds[i].name == "猜单骰"
          ) {
            that.wanfOdds[i].panel = f1Room.panel_6;
          } else if (
            !_.isEmpty(f1Room.panel_7) &&
            that.wanfOdds[i].name == "猜双骰"
          ) {
            that.wanfOdds[i].panel = f1Room.panel_7;
          }
          if (_.isEmpty(that.wanfOdds[i].panel)) {
            that.wanfOdds.splice(i, 1);
            i--;
          }
        }
      }
      this.playMethod=that.wanfOdds[0].panel
      console.log(this.playMethod,'playMethod');
    },
    lDragonData: function(newVal, oldVal){
      if(newVal){
        for(var i=0;i<this.wanfOdds.length;i++){
          if(this.wanfOdds[i].name=='长龙投注'){
            this.wanfOdds.splice(i,1)
            this.methodsArr.splice(i,1)
          }
        }
        if(newVal.length>0){
          this.wanfOdds.push({
            name:"长龙投注",
            panel:newVal
          })
          this.methodsArr.push('长龙投注')
          if(this.methodsArr[this.chekedMethod]=='长龙投注'){
            this.playMethod=newVal
          }
        }
      }
    },
    timeMessages: function(oldVal, newVal) {
      this.issue = oldVal.issue;
      console.log(this.issue, "this.issue");
    },
    cRoomData: function(oldVal, newVal) {
      let dataArr = oldVal.p_room;
      for (var i = 0; i < dataArr.length; i++) {
        if (this.roomId == dataArr[i].id||this.roomId == dataArr[i].idd) {
          this.betLower = dataArr[i].lower;
          if (dataArr[i].odds_exp == undefined || dataArr[i].odds_exp == "") {
            this.RoomDateList = "暂无数据";
          } else {
            this.RoomDateList = dataArr[i].odds_exp;
          }
        }
      }
    },
    BetmoneyList: function(oldVal, newVal) {
      this.moneyList = oldVal;
      this.checkedMoney = this.moneyList[0];
    },
    checkedMoney: function(newVal, oldVal) {
      this.totalMoney = this.checkedOdd.length * newVal;
    }
  },
  deactivated() {},
  beforeDestroy() {}
};
</script>

<style scoped>
.bigorsmall div:first-child .h3Tit h3 {
  margin-top: 0
}
.h3Tit {
  height: auto;
  overflow: hidden;
}
.h3Tit h3 {
	position: relative;
	margin-top: 20px;
	margin-bottom: 0;
	padding-left: 10px;
	line-height: 16px;
	font-size: 14px;
	font-weight: 200;
}
.h3Tit h3::before {
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -8px;
	left: 0;
	width: 4px;
	height: 16px;
	background-color: red;
	border-radius: 2px;
	display: inline-block;
}
.oddsTable {
  width: 100%;
  line-height: 24px;
}
.oddsTable td {
  text-align: center;
}
.playList {
  font-size: 14px;
}
.chooseSytle:hover {
  background: #ffd6d1;
  border: 1px solid #f3596a !important;
}
.chooseSytle p:first-child {
  color: #48484c;
  font-size: 14px;
}
.chooseSytle p:last-child {
  color: #f3596a;
}
.checkedStyle {
  background: #ffd6d1;
  border: 1px solid #f3596a !important;
}
.checkedStyle p {
  color: #f3596a !important;
}
.ckMoneyStyle {
  position: relative;
  top: -6px;
  border-radius: 50%;
  box-shadow: 0px 0px 10px #FFEC00;
}
.choosetoplayleft {
  height: 760px;
  width: 90px;
  background-color: #f9f9f9;
  text-align: center;
  line-height: 50px;
}
.choosetoplayleft .choosetheplay {
  width: 90px;
  height: 50px;
  font-weight: 600;
  font-size: 16px;
}
.choosetoplayleft > ul {
  position: relative;
}
.choosetoplayleft > ul > li {
  cursor: pointer;
}
.choosetoplayleft > ul > li a {
  color: #495060;
}
.choosetoplayleft > ul > li .otherf1 {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.choosetoplayleft > ul > li:hover {
  background: #ececec;
}

.choosetoplayleft > ul .sort {
  position: absolute;
  top: 0;
  right: -90px;
  background-color: red;
}
.choosetoplayleft > ul .sort ul li {
  width: 90px;
  height: 50px;
}
i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 15px;
  height: 40px;
  margin-top: -20px;
  border: 1px solid #ccc;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  /* background: url("../../../../assets/images/spirt.png") 0 131px; */
  cursor: pointer;
  z-index: 999;
}
.choosetoplaycenter {
  position: relative;
  width: 322px;
}
.choosetoplaycenter .centermain {
  height: 510px;
  overflow: auto;
}
.choosetoplaycenter .centermain .top {
  height: 50px;
}
.choosetoplaycenter .centermain .top ul {
  box-sizing: border-box;
  width: 280px;
  margin: 0 auto;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-around;
}
.choosetoplaycenter .centermain .top ul li {
  line-height: 46px;
  text-align: center;
  color: #b8b8b8;
  font-size: 16px;
  font-weight: 600;
  box-sizing: border-box;
  cursor: pointer;
}
.choosetoplaycenter .centermain .center {
  position: relative;
  height: 50px;
}
.choosetoplaycenter .centermain .center ul {
  margin: 0 10px;
  display: flex;
  justify-content: space-between;
}
.choosetoplaycenter .centermain .center ul li {
  text-align: center;
  line-height: 50px;
  position: relative;
}
.choosetoplaycenter .centermain .center ul li:first-child span {
  position: absolute;
  height: 16px;
  width: 4px;
  background-color: red;
  top: 17px;
  border-radius: 2px;
}
.choosetoplaycenter .centermain .center ul li:last-child em {
  position: absolute;
  top: 16px;
  left: -20px;
  width: 20px;
  height: 20px;
  /* background: url("../../../../assets/images/spirt.png") 0 247px; */
}
ul li:hover {
  cursor: pointer;
}
.choosetoplaycenter .centermain .bigorsmall,
.choosetoplaycenter .centermain .guessnumber {
  margin: 0 10px;
}
.choosetoplaycenter .centermain .bigorsmall ul,
.choosetoplaycenter .centermain .guessnumber ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}
.choosetoplaycenter .centermain .bigorsmall ul li,
.choosetoplaycenter .centermain .guessnumber ul li {
  box-sizing: border-box;
  width: 60px;
  height: 50px;
  border-radius: 3.2px;
  border: solid 0.5px #c7c7c7;
  margin-top: 10px;
  font-size: 14px;
  margin-left: 13px;
}
.choosetoplaycenter .centermain .bigorsmall ul li p,
.choosetoplaycenter .centermain .guessnumber ul li p {
  line-height: 25px;
  text-align: center;
}
.choosetoplaycenter .centermain .guessnumber .guessnumberlist li {
  width: 42px;
  height: 42px;
  border-radius: 90px;
  border: solid 0.5px #c7c7c7;
  margin-right: 4px;
}
.choosetoplaycenter .centermain .guessnumber .guessnumberlist li p:first-child {
  font-size: 19.8px;
  font-family: Helvetica;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: 0.2px;
  text-align: center;
  color: #48484c;
}
.choosetoplaycenter .centermain .guessnumber .guessnumberlist li p:last-child {
  font-family: PingFangSC;
  font-size: 10.8px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  text-align: center;
  color: #48484c;
  line-height: 10.8px;
}
.choosetoplaycenter .line {
  display: inline-block;
  margin: 0 26px 0 29px;
  width: 247px;
  height: 1px;
  background-color: #eee;
}
.choosetoplaycenter .choosetoplayfooter .havebet {
  height: 30px;
  margin-left: 5px;
  border-bottom: 1px solid #eee;
}
.choosetoplaycenter .choosetoplayfooter .havebet p {
  line-height: 30px;
  text-align: center;
  font-size: 14px;
}
.choosetoplaycenter .choosetoplayfooter .havebet p span {
  color: red;
}
.choosetoplaycenter .choosetoplayfooter .inputbet {
  margin: 10px 20px;
}
.choosetoplaycenter .choosetoplayfooter .inputbet input {
  height: 30px;
  width: 262px;
  font-size: 14px;
  border: 1px solid #eee;
}
.choosetoplaycenter .choosetoplayfooter .inputbet span {
  display: inline-block;
  width: 68px;
  text-align: right;
  color: #5db2ff;
  font-size: 14px;
  cursor: pointer;
  line-height: 32px;
}
.bet {
  position: relative;
  margin: 0 20px;
  height: 36px;
}
.bet em {
  position: absolute;
  height: 22px;
  width: 22px;
  left: -22px;
  top: 0px;
  /* background: url("../../../../assets/images/spirt.png") 0 204px; */
}
.bet ul {
  display: flex;
  justify-content: space-around;
}
.bet ul li {
  width: 36px;
  height: 35px;
  font-size: 12px;
  font-family: aril;
  font-weight: 600;
  /* border-bottom: 1px solid #48484c; */
  color: #48484c;
  line-height: 32px;
  text-align: center;
  background-repeat: no-repeat;
}
.bet ul li:nth-child(1) {
  /* background: url("../../../../assets/images/chip-1@3x.png"); */
}
.bet ul li:nth-child(2) {
  /* background: url("../../../../assets/images/chip-2@3x.png"); */
}
.bet ul li:nth-child(3) {
  /* background: url("../../../../assets/images/chip-5@3x.png"); */
}
.bet ul li:nth-child(4) {
  /* background: url("../../../../assets/images/chip-10@3x.png"); */
}
.bet ul li:nth-child(5) {
  /* background: url("../../../../assets/images/chip-50@3x.png"); */
}
.bet ul li:nth-child(6) {
  /* background: url("../../../../assets/images/chip-100@3x.png"); */
}
.reset {
  margin: 5px 50px;
}
.reset button:first-child {
  width: 104px;
  height: 30px;
  border-radius: 2px;
  border: none;
  color: white;
}
.reset button:last-child {
  width: 62px;
  height: 30px;
  margin-left: 10px;
  border: none;
  background-color: white;
  color: #5db2ff;
}
.choosetoplaycenter > .shrink {
  border: 1px solid #ccc;
  border-right: 0px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -20px;
  width: 15px;
  height: 40px;
  /* background: url("../../../../assets/images/spirt.png") 0 178px; */
  cursor: pointer;
}
.choosedactive {
  background-color: #ececec;
  border-left: 4px solid red;
}
.activebottomline {
  border-bottom: 4px solid red;
  color: #545454 !important;
  font-weight: 600;
}
.tableTip {
  text-align: left;
  float: left;
  line-height: 32px;
}
.tableTip span {
  color: #f3596a;
  padding: 0px 4px;
}
.zfInput {
  text-align: center;
  margin-bottom: 10px;
  margin-top: 20px;
}
.zfInput .ivu-input-number {
  margin: 0px 5px;
}
.moneyInput {
  width: 80%;
  margin: 0 auto;
  display: block;
  margin-bottom: 10px;
}
.zhPanel2 {
  margin-bottom: 16px;
}
.zhPanel2 .ivu-input-number {
  margin: 0px 5px;
}

.moneyInput2 {
  width: 160px;
  margin: 0px 10px;
}
.resetBtn {
  border: none;
  background-color: white;
  color: #5db2ff;
}
.titlered {
  position: relative;
  border: none !important;
  padding: 15px 0;
}
.titlered > span {
  position: absolute;
  height: 16px;
  width: 4px !important;
  background-color: red;
  top: 17px;
  border-radius: 2px;
  display: inline-block;
}
/* .guanyahe{
    display: inline-block;
    position: relative;
    padding: 15px 0;
} */
.guanyahe > p {
  padding-left: 3%;
  padding: 9px 0;
  border: solid 1px #c7c7c7;
  border-radius: 3.2px;
  margin-bottom: 8px;
}
.guanyahe > p > span {
  display: inline-block;
  width: 55%;
  padding-left: 6px;
  text-align: center;
}
.guanyahe > p > span:nth-child(1) {
  width: 20%;
}
.guanyahe > p > span:nth-child(3) {
  width: 20%;
  color: #f3596a;
}
.springF {
  position: relative;
  height: 25px;
}

.springF > span {
  display: inline-block;
  width: 18px !important;
  height: 18px !important;
  margin-right: 2px !important;
  /* background-image: url("../../../../assets/images/spirt.png") !important; */
  background-repeat: no-repeat;
  border-radius: 0% !important;
  margin-top: 6px;
}
.gusessNum-1 {
  background-position: -361px -39px !important;
}
.gusessNum-2 {
  background-position: -361px -59px !important;
}
.gusessNum-3 {
  background-position: -361px -79px !important;
}
.gusessNum-4 {
  background-position: -361px -99px !important;
}
.gusessNum-5 {
  background-position: -361px -119px !important;
}
.gusessNum-6 {
  background-position: -361px -139px !important;
}
.gusessNum-7 {
  background-position: -361px -159px !important;
}
.gusessNum-8 {
  background-position: -361px -179px !important;
}
.gusessNum-9 {
  background-position: -361px -199px !important;
}
.gusessNum-10 {
  background-position: -361px -219px !important;
}
.resetBtn {
  border: none;
  background-color: white;
  color: #5db2ff;
}
.btnBox button {
  display: block;
  margin: 0 auto;
}
.choosetoplaycenter .centermain .center ul li:nth-child(2):hover {
  color: #f3596a;
}
.choosetoplaycenter .bigorsmall .guessNum > p {
  width: 86px;
  height: 50px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid #c7c7c7;
  margin: 6px;
  margin-bottom: 9px;
}
.choosetoplaycenter .bigorsmall .guessNum > p > span {
  display: inline-block;
}
.choosetoplaycenter .bigorsmall .guessNum > p > span:first-child {
  width: 28px;
  height: 28px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1),
    rgba(239, 239, 239, 1)
  );
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.35);
  margin-top: 10px;
  margin-left: 6px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  color: rgba(39, 33, 56, 1);
  font-size: 19px;
}
.choosetoplaycenter .bigorsmall .guessNum > p > span:last-child {
  width: 39px;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  color: #f3596a;
  line-height: 20px;
  text-align: center;
}
.checkedNumStyle:hover {
  background: #ffd6d1;
  border: 1px solid #f3596a !important;
}
.checkedNumStyle p:first-child {
  color: #48484c;
}
.checkedNumStyle p:last-child {
  color: #f3596a;
}
.checkedNumStyle {
  background: #ffd6d1;
  border: 1px solid #f3596a !important;
}
.checkedNumStyle p {
  color: #f3596a !important;
}
.checkedNumStyle > span:first-child {
  /* background-image: url("../../../../assets/images//glurp.png") !important; */
  background-position: 0px 1px !important;
  background-repeat: no-repeat;
  color: white !important;
}
.chooseSytle {
  cursor: pointer;
}
.tableNoData {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.leftBar {
  display: flex;
  width: 412px;
}
.zjjtP {
  text-align: right;
  padding: 8px 4px;
}
.cpmPanel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}
.cpmPanel p {
  text-align: center;
}
.cpmPanel > div {
  width: 30%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  border: solid 1px #c7c7c7;
  border-radius: 3.2px;
  padding: 0px 3%;
}
.choosetoplaycenter .centermain .bigorsmall .cpmPanel {
  justify-content: space-between;
}
.choosetoplaycenter .centermain .bigorsmall .cpmPanel > li {
  width: 22%;
  margin-left: 0;
}
.cdzPanel>div{width: 48%;}
.flexBox{display: flex;justify-content: space-between;}
.cwsPanel{width: 100%;}
.cwsPanel>div{width: 48%;}
.sjBox>div:first-child{margin: 0 auto;display: block;margin-top: 5px;}
.fullWidth{width: 100% !important;}
.fullWidth>div{width: 75%;height: 150px;display: flex;flex-wrap: wrap;justify-content: space-between;}
.fullWidth>div>div{width: 30%;}
.cpmImg {
  width: 30px;
  height: 30px;
  margin: 5px 0px;
}
.cpmImg1 {
  /* background: url("../../../../assets/images/shaibao/dice-1.png"); */
  background-size: 100% 100%;
}
.cpmImg2 {
  /* background: url("../../../../assets/images/shaibao/dice-2.png"); */
  background-size: 100% 100%;
}
.cpmImg3 {
  /* background: url("../../../../assets/images/shaibao/dice-3.png"); */
  background-size: 100% 100%;
}
.cpmImg4 {
  /* background: url("../../../../assets/images/shaibao/dice-4.png"); */
  background-size: 100% 100%;
}
.cpmImg5 {
  /* background: url("../../../../assets/images/shaibao/dice-5.png"); */
  background-size: 100% 100%;
}
.cpmImg6 {
  /* background: url("../../../../assets/images/shaibao/dice-6.png"); */
  background-size: 100% 100%;
}
.chsImg {
  width: 21px;
  height: 21px;
  margin: 0px auto;
  margin-top: 5px;
}
.chsImg1 {
  /* background: url("../../../../assets/images/niuniu/chs1.png"); */
  background-size: 100% 100%;
}
.chsImg2 {
  /* background: url("../../../../assets/images/niuniu/chs2.png"); */
  background-size: 100% 100%;
}
.chsImg3 {
  /* background: url("../../../../assets/images/niuniu/chs3.png"); */
  background-size: 100% 100%;
}
.chsImg4 {
  /* background: url("../../../../assets/images/niuniu/chs4.png"); */
  background-size: 100% 100%;
}
</style>
<style>
.playList .ivu-select-dropdown {
  left: 92px !important;
}
.playList .ivu-dropdown-rel > a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.playList .ivu-dropdown {
  width: 100%;
}
.playList .ivu-select-dropdown {
  width: auto;
}
</style>





// WEBPACK FOOTER //
// src/components/room/playMethods/shaiBao/shaiBao.vue